import { Form, Input, Button, Upload, message } from "antd";
import { Component } from "react";
import { EyeTwoTone, EyeInvisibleOutlined } from "@ant-design/icons";

import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import { instance } from "../../utils/request";

interface AddUserFormProps {
  visible?: boolean;
  close?: () => void;
  closeModal: () => void; // 将closeModal方法作为props传递给子组件
}

class AddUsersForm extends Component<AddUserFormProps> {
  state = {};
  onFinish = (values: any) => {
    console.log(values);
    let params = {
      username: values.username,
      password: values.password,
      email: values.email,
      mobile: values.mobile,
    };

    instance
      .post("/users", params)
      .then((res) => {
        console.log(res);
        message.success("添加用户成功!");
        this.props.closeModal();
      })
      .catch((error) => {
        console.log("error=", error);
      });
  };

  onFinishFailed = () => {};
  render() {
    return (
      <div>
        <Form onFinish={this.onFinish} onFinishFailed={this.onFinishFailed}>
          <Form.Item
            label="用户名称"
            name="username"
            rules={[{ required: true, message: "请输入用户名称" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="用户密码"
            name="password"
            rules={[{ required: true, message: "请输入用户密码" }]}
          >
            <Input.Password
              iconRender={(visible) =>
                visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
              }
            />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              { required: true, message: "请输入用户邮箱" },
              { type: "email", message: "请输入有效的邮箱地址" },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="手机号"
            name="mobile"
            rules={[
              { required: true, message: "请输入用户号" },
              { pattern: /^[1-9]\d{10}$/, message: "请输入有效的手机号码" },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item style={{ float: "right", marginLeft: "10px" }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default AddUsersForm;
